<template>
  <div>
    <h1>子组件</h1>
    <h1>{{ msg }}</h1>
    <h2 v-for="item in list" :key="item">
      {{ item }}
    </h2>
    <button @click="send">子传递数据</button>
    <h1>二弟说：{{ erMsg }}</h1>
  </div>
</template>
<script>
// 父传子  子组件设置props 父组件v-bind传递数据
// 子传父  自定义事件 传递
// 子组件 使用$emit 触发事件并传参 父组件的事件函数的形参
// 就是传递的数据
export default {
  // props: ['msg', 'list']
  props: {
    msg: {
      type: String,
      default: '' //默认值
    },
    list: {
      type: Array,
      default: []
    },
    mm: {
      type: Boolean, //类型
      required: true //必传的props
    }
  },
  data () {
    return {
      zname: '好大儿',
      zage: '18',
      aihao: ['抽烟', '喝酒', '烫头'],
      erMsg: ''
    }
  },
  beforeMount () {
    // 监听兄弟组件触发的事件 接受数据
    this.$bus.$on('sendmsg', a => {
      this.erMsg = a
    })
  },
  mounted () {
    this.$emit('sendData', this.zname, this.zage, this.aihao)
  },
  methods: {
    send () {
      //  触发自定义事件
      // this.$emit('sendData', this.zname, this.zage, this.aihao)
    }
  }
}
</script>
